<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
</head>
<body>
      <div id="box">
            <div id="list">
                  
            </div>
      </div>
      <button id="btn">点击渲染</button>
      <script>
            document.querySelector("#btn").onclick = function(){
                  // 1. 创建一个xhr实例对象
                  var xhr = new XMLHttpRequest();
                  xhr.open("GET" , "./06_data.php");
                  xhr.send();
                  xhr.onreadystatechange = function(){
                        if(xhr.readyState === 4){
                              var json = xhr.responseText;
                              // console.log(json);
                              json = JSON.parse(json);
                              var html = "";
                              for(var i = 0 ; i < json.length ; i ++){
                                    html += `
                                          <li>
                                                <img src="${json[i].img}">
                                                <p>${json[i].title}</p>
                                          </li>
                                    `
                              }
                              document.querySelector("#list").innerHTML = html;
                        }
                  }
            }

      </script>
</body>
</html>